<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片放大缩小示例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="width*=1.1">放大10%</button>
        <button @click="width*=0.9">缩小10%</button>
        <br>
        <img :width="width" src="img/t03.jpg" alt=""><br>
		{{msg}} <br>
		<input v-model="msg" type="text" />
		<hr >
		{{a}}
		<span v-if='a%2 == 0'>偶数</span>
		<span v-else>奇数</span>
		{{a%2 == 0?"偶数":"奇数"}}
		
		<hr >
		姓名：{{student.name}} 年龄：{{student.age}}
		<p>
			{{student.name}}是  
			<b v-if='student.age >=18'>成年人</b>
			<b v-else>未成年人</b>
			{{student.age >=18?"成年人":"未成年人"}}
			
		</p>
    </div>
    <script>
	
      const app=Vue.createApp({
            data() {
                return {
                    width: 200,// 初始宽度
					msg:'hello vue',
					a:6,
					student:{
						name:"张三",
						age:16
					}
                }
            }
           
        }).mount('#app');
    </script>
</body>
</html>